
<template>
  <div class="con">
    <div class="process">
      <h3 class="title">小程序四步营销攻略，助您完善经营</h3>
      <div class="conter">
        <div class="item">
          <i class="iconfont icon-shouye"></i>
          <h4>推广</h4>
          <div>小程序流量入口</div>
        </div>
        <i class="iconfont icon-shouye"></i>
        <div class="item">
          <i class="iconfont icon-shouye"></i>
          <h4>推广</h4>
          <div>小程序流量入口</div>
        </div>
        <i class="iconfont icon-shouye"></i>
        <div class="item">
          <i class="iconfont icon-shouye"></i>
          <h4>推广</h4>
          <div>小程序流量入口</div>
        </div>
        <i class="iconfont icon-shouye"></i>
        <div class="item">
          <i class="iconfont icon-shouye"></i>
          <h4>推广</h4>
          <div>小程序流量入口</div>
        </div>
      </div>
    </div>
    <div class="festival">
      <h3 class="title">日常营销</h3>
      <div class="conter">
        <div class="time">
          <dl>
            <dt>2019/06</dt>
            <dd>18</dd>
          </dl>
          <dl>
            <dt>2019/06</dt>
            <dd>18</dd>
          </dl>
        </div>
        <div class="border">
          <div class="bor"></div>
          <div class="point"></div>
          <div class="bor"></div>
          <div class="bor"></div>
          <div class="point"></div>
          <div class="bor"></div>
        </div>
        <div class="list">
          <div class="item">
            <div class="festivalName">
              <div>618大促</div>还有0天
            </div>
            <div class="newFestival">创建活动</div>
          </div>
          <div class="item">
            <div class="festivalName">
              <div>618大促</div>还有0天
            </div>
            <div class="newFestival">创建活动</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tool">
      <h3 class="title">常用工具</h3>
      <ul class="conter">
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="branding">
      <h3 class="title">品牌宣传</h3>
      <ul class="conter">
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="mall">
      <h3 class="title">商城经营</h3>
      <ul class="conter">
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="branding">
      <h3 class="title">公众号运营</h3>
      <ul class="conter">
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
        <li class="item">
          <i class="iconfont icon-shouye strfontColor1"></i>
          <dl>
            <dt class="strfontColor1">直播</dt>
            <dd>视频直播，边看边买</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "marketing",
  components: {
    // HelloWorld
  },
  data() {
    return {
      domList: [],
      isOpenWind: true //点击X关闭窗口
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="less">
.con {
  width: 81rem;
  height: auto;
  margin-left: 1rem;
  display: inline-flex;
  flex-wrap: wrap;
}
.process,
.festival,
.tool,
.branding,
.mall,
.public {
  padding: 1rem;
  margin-top: 0.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  .title {
    font-weight: 600;
    font-size: 0.75rem;
    color: #343434;
    text-align: left;
    height: 1.5rem;
  }
}

.tool,
.branding,
.mall,
.public {
  width: 79rem;
  height: auto;
  .conter {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .item:nth-child(4n + 0) {
      margin-right: 0;
    }
    .item {
      width: 19.9rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      background-color: #f9f9f9;
      border: 0.05rem solid #f9f9f9;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 1rem;
      margin-right: 1rem;
      .iconfont {
        font-size: 2.35rem;
        margin-right: 0.8rem;
      }
      dt {
        text-align: left;
        font-size: 1rem;
        margin-bottom: 0.25rem;
      }
      dd {
        color: #c2c2c2;
        font-size: 0.7rem;
        margin-top: 0.25rem;
      }
      .strfontColor1 {
        color: #2d8cf0;
      }
    }
  }
}
// ..tool,
// .branding,
// .mall,
// .public
.tool {
  .conter {
    .item:hover {
      border-color: #fda327;
      background-color: #fffaf3;
      .strfontColor1 {
        color: #fda327;
      }
    }
  }
}
.branding {
  .conter {
    .item:hover {
      border-color: #e9403c;
      background-color: #fffaf3;
      .strfontColor1 {
        color: #e9403c;
      }
    }
  }
}
.mall {
  .conter {
    .item:hover {
      border-color: #2d8cf0;
      background-color: #fffaf3;
      .strfontColor1 {
        color: #2d8cf0;
      }
    }
  }
}
.public {
  .conter {
    .item:hover {
      border-color: #44a448;
      background-color: #fffaf3;
      .strfontColor1 {
        color: #44a448;
      }
    }
  }
}
.process {
  width: 55.5rem;
  height: 10.7rem;
  .conter {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .iconfont {
      color: #e4f0ff;
      font-size: 1.25rem;
    }
    .item {
      width: 7.75rem;
      height: 8.5rem;
      border-radius: 0.5rem;
      border: 1px solid #3889fc;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .iconfont {
        font-size: 2.35rem;
        color: #3889fc;
        margin-bottom: 0.5rem;
      }
      h4 {
        font-size: 0.85rem;
        color: #3889fc;
        margin-top: 0.5rem;
      }
      div {
        font-size: 0.75rem;
        color: #a9a9a9;
        margin-top: 0.5rem;
      }
    }
  }
}
.festival {
  width: 32.9rem;
  height: 10.7rem;
  margin-left: 0.5rem;
  .conter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time {
      width: 3.9rem;
      height: 8.6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      dl {
        width: 3.9rem;
        dt {
          width: 100%;
          height: 1.25rem;
          line-height: 1.25rem;
          text-align: center;
          background-color: #e94340;
          font-size: 0.5rem;
          color: #fff;
          border-radius: 0.25rem 0.25rem 0 0;
        }
        dd {
          width: 100%;
          height: 2.1rem;
          line-height: 2.1rem;
          text-align: center;
          background-color: #f0f0f0;
          color: #343434;
          font-size: 1.25rem;
          border-radius: 0 0 0.25rem 0.25rem;
        }
      }
    }
    .border {
      width: 3.9rem;
      height: 8.6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      .bor {
        width: 0rem;
        height: 1.85rem;
        border: 0.025rem solid #f0f0f0;
      }
      .point {
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 0.7rem;
        background-color: #f0f0f0;
      }
    }
    .list {
      width: 25rem;
      .item {
        width: 23rem;
        height: 4rem;
        background-color: #f7f7f7;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0;
        padding: 0 1rem;
        .festivalName {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          font-size: 0.75rem;
          color: #c2c2c2;
          div {
            background-color: #e94340;
            color: #fff;
            font-size: 1rem;
            padding: 0.25rem 0.5rem;
            border-radius: 2rem;
            margin-bottom: 0.25rem;
          }
        }
        .newFestival {
          width: 3.85rem;
          height: 1.25rem;
          line-height: 1.25rem;
          text-align: center;
          border-radius: 1.25rem;
          background-color: #3889fc;
          color: #fff;
          font-size: 0.7rem;
        }
      }
    }
  }
}
</style>